<template>
  <el-form
    class="search-form"
    ref="formRef"
    label-position="right"
    :inline="true"
    :model="formValue"
    :rule="rules"
  >
    <el-row :gutter="10" :class="isCollapse ? 'search-form__close' : 'search-form__open'">
      <slot></slot>
      <slot name="footer"> </slot>
    </el-row>
  </el-form>
</template>
<script lang="ts" setup>
import { ref, defineEmits } from 'vue'

defineProps({
  formValue: {
    type: Object,
  },
  rules: {
    type: Object,
  },
  wrapperSpan: {
    type: [String, Number],
    default: 8,
  },
})

const emit = defineEmits(['reset', 'submit'])
const isCollapse = ref(false)
const formRef = ref(null)

// 验证完成并提交
const handleFinish = (values) => {
  emit('submit', values)
}
// 重置表单
const resetForm = () => {
  formRef.value.resetFields()
  // 触发重置事件
  emit('reset')
}
const closeForm = () => {
  isCollapse.value = !isCollapse.value
}
</script>
<style lang="less" scoped>
.search-form {
  padding: 10px;
  border-radius: 2px;
  background: #fff;
  ::v-deep(.el-form-item) {
    .el-form-item__label {
      width: 100px;
    }
    .el-form-item__content {
      width: 224px;
    }
  }
  ::v-deep(.el-input .el-input__wrapper) {
    width: 224px;
  }
}
.search-form__close {
  height: 40px;
  max-height: 40px;
  overflow: hidden;
}
.search-form__btn {
  text-align: right;
  color: var(--el-color-primary);
  .search-form__btn-collapse {
    margin-left: 10px;
    padding: 0 10px;
    cursor: pointer;
    &:hover {
      background: var(--el-color-primary-light-8);
      border-radius: 4px;
    }
  }
  ::v-deep(.el-form-item) {
    .el-form-item__content {
      width: 210px;
    }
  }
}
.search-form__btn-open {
  background: #fff;
  position: absolute;
  top: 0;
  right: 10px;
  width: 33%;
}
</style>
